<template>
<div class="banner" v-if='items.length'>
    
    <i-carousel autoplay loop :autoplay-speed='speed*1000'>
        <i-carousel-item   v-model="currentNum" v-for='(item, index) of items' :key='index'> 
            <a :href="item.path" class="banner-item">
                <div class="img-box">
                    <img :src="item.imgUrl" :alt="item.path">
                </div>
            </a>
        </i-carousel-item>
    </i-carousel>
</div> 
</template>

<script lang='ts'>
import {Component, Vue, Prop} from 'vue-property-decorator';

export interface IBanner{
    current?: number
    items: Array<IBannerItem>

}

export interface IBannerItem{
    path: string,
    imgUrl:string
}


@Component
export default class Banner extends Vue{

    @Prop()
    items?: Array<IBannerItem>
    
    currentNum: number = 0
    speed: number = 5

    
    
}


</script>

<style scoped lang='less'>

.banner{
    
    .banner-item{
        display: block;
        height: 320*@rem;
    }
}



</style>